<template>
  <el-dialog
    v-bind="$attrs"
    width="500px"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-form
      ref="dataForm"
      class="center"
      :model="levelForm"
      label-width="200px"
      @submit.prevent.native
      :rules="dataRule"
    >
      <el-form-item :label="$t('operator.level')" prop="levelCode">
        <el-select v-model="levelForm.levelCode" clearable style="width: 80%">
          <el-option
            v-for="item in levelList"
            :key="item.levelCode"
            :value="item.levelCode"
            :label="item.levelName"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('operator.expireDate')" prop="expireTime">
        <el-date-picker
          v-model="levelForm.expireTime"
          type="date"
          value-format="x"
          class="mr-2"
          style="width: 80%"
          :placeholder="$t('operator.expireTimeTip')"
        />
        <span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('operator.leverExpireTimeTip')"
            placement="top"
          >
            <i class="el-icon-info" />
          </el-tooltip>
        </span>
      </el-form-item>
    </el-form>

    <template #footer>

    <span class="dialog-footer">
      <el-button
        v-if="isAuth('10680202.MANAGE')"
        @click="handleClose"
        >{{ $t('common.cancel') }}</el-button
      >
      <el-button
        v-if="isAuth('10680202.MANAGE')"
        type="primary"
        :loading="dataListLoading"
        @click="submit"
        >{{ $t('common.confirm') }}</el-button
      >
    </span>
  </template>

  </el-dialog>
</template>

<script>
import { operatorLevelUpdate } from '@/api/operator'
import { getSystemMenuList } from '@/api/system-menu'
import { isAuth } from "@/utils";


export default {
  props: ['operator'],
  data() {
    const validateLevelcode = (rule, value, callback) => {
      if (!value || value.length < 1) {
        callback(new Error(this.$t('operator.levelcode_tip')))
      } else {
        callback()
      }
    }
    return {
      dataListLoading: false,
      levelForm: {
        operatorId: '',
        levelCode: '',
        expireTime: null
      },
      levelList: [],
      dataRule: {
        levelCode: [
          { required: true, trigger: 'manual', validator: validateLevelcode }
        ]
      }
    }
  },
  methods: {
    isAuth,
    handleClose() {
      this.$emit('update:model-value', false)
    },
    handleOpen() {
      let params = {
        characterCode: '',
        levelCode: '',
        pageNo: 1,
        pageSize: 100
      }
      getSystemMenuList(params)
        .then((res) => {
          this.levelList = res.data
        })
        .catch((e) => {
          this.$confirmError(e)
        })
      this.levelForm.operatorId = this.operator.operatorId
      this.levelForm.levelCode = this.operator.levelCode
      this.levelForm.expireTime =
        this.operator.expireTime === null
          ? null
          : this.operator.expireTime * 1000
    },
    submit() {
      this.dataListLoading = true
      console.log('form', this.levelForm)
      operatorLevelUpdate(this.levelForm)
        .then((data) => {
          this.dataListLoading = false
          this.$emit('refresh')
          this.handleClose()
        })
        .catch((e) => {
          this.$confirmError(e)
          this.dataListLoading = false
        })
    }
  }
}
</script>

<style>
</style>
